<template>
  <div class="middle-box">
    <span class="label"> 单票信息 </span>
  </div>
  <div class="layout-table">
    <div class="container-table">
      <div class="item item-layout">
        <div class="label-item">委托单位</div>
        <div class="content-item">
          {{ detailData.requester }}
        </div>
      </div>
      <div class="item item-layout">
        <div class="label-item">委托编号</div>
        <div class="content-item">
          {{ detailData.consignmentNo }}
        </div>
      </div>
      <div class="item item-layout">
        <div class="label-item">业务模式</div>
        <div class="content-item">海运出口,{{ detailData.fclLcl }}</div>
      </div>
      <div class="item item-layout">
        <div class="label-item">服务内容</div>
        <div class="content-item">
          {{ detailData.seviceType.join(',') }}
        </div>
      </div>
      <div class="item item-layout">
        <div class="label-item">提单号</div>
        <div class="content-item">
          {{ detailData.blno }}
        </div>
      </div>
      <div class="item item-layout">
        <div class="label-item">船名</div>
        <div class="content-item">
          {{ detailData.vessel }}
        </div>
      </div>
      <div class="item item-layout">
        <div class="label-item">航次</div>
        <div class="content-item">
          {{ detailData.voyage }}
        </div>
      </div>
      <div class="item item-layout">
        <div class="label-item">开航日期</div>
        <div class="content-item">
          {{
            detailData.atd
              ? $utils.formatDateTime(detailData.atd, 'YYYY-MM-DD HH:mm')
              : ''
          }}
        </div>
      </div>
      <div class="item item-layout">
        <div class="label-item">船公司</div>
        <div class="content-item">
          {{ detailData.shipowner }}
        </div>
      </div>

      <div class="item item-layout">
        <div class="label-item">起运港</div>
        <div class="content-item">
          {{ detailData.loadingPort }}
        </div>
      </div>
      <div class="item item-layout">
        <div class="label-item">目的港</div>
        <div class="content-item">
          {{ detailData.dischargePort }}{{ detailData.dischargePort }}
        </div>
      </div>
      <div class="item item-layout">
        <div class="label-item">靠泊码头</div>
        <div class="content-item">
          {{ detailData.berthWharf }}
        </div>
      </div>
      <div class="item item-layout">
        <div class="label-item">业务人员</div>
        <div class="content-item">
          {{ detailData.sailsman }}
        </div>
      </div>
      <div class="item item-layout">
        <div class="label-item">商务人员</div>
        <div class="content-item">
          {{ detailData.businessman }}
        </div>
      </div>
      <div class="item item-layout">
        <div class="label-item">操作人员</div>
        <div class="content-item">
          {{ detailData.operator }}
        </div>
      </div>
      <div class="item item-layout">
        <div class="label-item">单证人员</div>
        <div class="content-item">
          {{ detailData.documentSpecialist }}
        </div>
      </div>
      <div class="item item-layout" style="width: 100%">
        <div class="label-item">箱型箱量</div>
        <div class="content-item">
          {{ detailData.formatBoxs }}
        </div>
      </div>
    </div>
  </div>
  <div class="middle-box">
    <span class="label"> 单票合计 </span>
  </div>
  <div class="layout-table">
    <div class="container-table">
      <div class="item-first item-layout">
        <div class="item-two-label">
          <div class="label-item">折人民币应收</div>
          <div class="label-item">不含税金额</div>
        </div>
        <div class="content-item-two">
          {{ singleTicket.notaxMoneyIn }}
        </div>
      </div>
      <div class="item-scond item-layout">
        <div class="label-item">税额</div>
        <div class="content-item">
          {{ singleTicket.taxAmountIn }}
        </div>
      </div>
      <div class="item-scond item-layout">
        <div class="label-item">含税金额</div>
        <div class="content-item">
          {{ singleTicket.amountIsTaxIn }}
        </div>
      </div>
      <div class="item-first item-layout">
        <div class="item-two-label">
          <div class="label-item">折人民币应付</div>
          <div class="label-item">不含税金额</div>
        </div>
        <div class="content-item-two">
          {{ singleTicket.notaxMoneyOut }}
        </div>
      </div>
      <div class="item-scond item-layout">
        <div class="label-item">税额</div>
        <div class="content-item">
          {{ singleTicket.taxAmountOut }}
        </div>
      </div>
      <div class="item-scond item-layout">
        <div class="label-item">含税金额</div>
        <div class="content-item">
          {{ singleTicket.amountIsTaxOut }}
        </div>
      </div>
      <div class="item-first item-layout">
        <div class="item-two-label">
          <div class="label-item">折人民币利润</div>
          <div class="label-item">利润</div>
        </div>
        <div class="content-item-two">
          {{ singleTicket.notaxMoneyProfit }}
        </div>
      </div>
      <div class="item-scond item-layout">
        <div class="label-item">利润率</div>
        <div class="content-item">{{ singleTicket.profitPrecent }}%</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, defineComponent, nextTick, reactive, ref } from 'vue'
import AppSearchForm from '@/components/AppSearchForm.vue'
import AppPageTable, { useTableOption } from '@/components/AppPageTable2'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { useStore, Store } from 'vuex'
import request from '@/public/request'
import selectDown from '../newBusiness/selectDownNew.vue'
import vueBus from '@/utils/vueBus'
import docSelects from './../components/docSelects.vue'
import docDetailFillShipperNew from './docDetailFillShipperNew.vue'
import { validateOnlyNumberTwo, validateNumber } from '@/utils/validate.js'

//判断当前打开的是否是业务列表
const props = defineProps({
  detailData: {
    type: Object,
    defalut: () => {}
  },
  singleTicket: {
    type: Object,
    defalut: () => {}
  }
})

// 弹框的form表单
const addFormRef = ref(null)
const BLDialog = ref(null)

const state = reactive({
  show: false,
  showCheck: false,
  cargonList: [],
  showCold: false,
  showDranger: false,
  showOog: false,
  secondeShow: false
})

const Router = useRouter()
const Route = useRoute()
const store = useStore()
</script>

<style lang="scss" scoped>
@import '@/styles/business/business.scss';
.layout-table {
  padding: 0 8px;
  margin-bottom: 16px;
}
.container-table {
  width: 100%;
  border: 1px solid #ebeef5;
  border-right: none;
  border-bottom: none;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;

  .item-layout {
    display: flex;
  }
}

.required::before {
  content: '*';
  color: #ff0000;
  font-family: PingFang SC;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
}

.item-first {
  color: #000000d8;
  font-family: PingFang SC;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
  width: 40%;
  .content-item-two {
    padding: 6px 4px;
    width: calc(100% - 204px);
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    align-items: flex-start;
  }
}

.item-scond {
  color: #000000d8;
  font-family: PingFang SC;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
  width: 30%;
  display: flex;
  .label-item {
    width: 104px;
    padding: 6px 4px;
    background: #f5f8f77f;
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    align-items: flex-start;
  }
  .content-item {
    padding: 6px 4px;
    width: calc(100% - 104px);
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    align-items: flex-start;
  }
}
.item-two-label {
  display: flex;
  .label-item {
    width: 104px;
    padding: 6px 4px;
    background: #f5f8f77f;
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    align-items: flex-start;
  }
}
</style>
